/*
 * @Description: 档案备份计划列表
 * @Author: Rfan
 * @Date: 2022-08-03 20:29:15
 * @LastEditTime: 2023-03-01 20:45:00
 */

import { useEffect, useState } from 'react';
import { Button, Space, Table } from 'antd';
import { formatDate } from '@/utils';
import { useFormatMessage } from '@/utils/intlHelpers';
import { useArchiveBasketContext } from '../contexts/ArchiveBasketContext';
import type { IPageQuery } from '@/interfaces/global';

const { Column } = Table;
const PageList = () => {
  const {
    list,
    getArchiveBasketList,
    selectItems,
    setSelectKey,
    delRecycleItemFunc,
    restoreItemFunc,
    levelFilter
  } = useArchiveBasketContext();
  const formatMessage = useFormatMessage();

  // 表格加载
  const [loading, setLoading] = useState(false);
  // 总条目数
  const [total, setTotal] = useState(0);
  // 表格请求参数
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });
  // 编辑弹窗
  const [tFormVisible, setTFormVisible] = useState(false);
  // 选中的表格项目
  const [selectTransfer, setSelectTransfer] = useState({});

  useEffect(() => {
    setLoading(true);
    setTotal(0);
    getArchiveBasketList(listQuery)
      .then((res: any) => {
        setTotal(res?.totalCount);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [listQuery]);

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };

  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };

  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  /**
   * @description: 打开编辑弹窗
   * @param {any} data 选中的条目
   */
  const showEditDialog = (data: any) => {
    setSelectTransfer(data);
    setTFormVisible(true);
  };
  /**
   * @description: 关闭编辑弹窗
   */
  const closeEditDialog = () => {
    setTFormVisible(false);
    setSelectTransfer({});
  };

  return (
    <>
      <Table
        dataSource={list}
        loading={loading}
        rowKey="id"
        rowSelection={rowSelection}
        bordered
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="题名" dataIndex="title" key="title" align="center" />
        <Column
          title="层级"
          dataIndex="level"
          key="level"
          align="center"
          render={(id) => levelFilter(id)}
        />
        <Column title="档号" dataIndex="arcNo" key="arcNo" align="center" />
        <Column title="年度" dataIndex="year" key="year" align="center" />

        {/* <Column title="原档案坐标" dataIndex="coordinate" key="coordinate" align="center" /> */}
        <Column
          title={formatMessage('tableAction')}
          key="action"
          align="center"
          width={200}
          render={(_text, record: any) => (
            <Space direction="vertical">
              <Button type="link" size="small" disabled>
                查看详情
              </Button>
              <Button
                type="link"
                size="small"
                danger
                onClick={() => {
                  delRecycleItemFunc(record.id);
                }}
              >
                删除
              </Button>
            </Space>
          )}
        />
      </Table>
    </>
  );
};

export default PageList;
